Создание иконок. Практика

Первое, что нам понадобится, это ответить на ряд вопросов:

  1. насколько сложный пакет мы хотим получить?
  2. какие размеры включить?
  3. будем ли делать один рисунок и потом его уменьшать или каждый размер рисовать заново?

Для тестового пакета определим такие требования:

  1. пакет будет иметь три универсальные иконки и особые иконки для нескольких популярных расширений
  2. иконки для расширений должны содержать текст расширения и особый цвет;
  3. цвета для расширений будут соответствовать аналогичным в пакете иконок "amigos";
  4. для каждого размера изображение будет рисоваться заново;
  5. размеры будут: 16, 32, 48, 96, 256 пикселей.

В качестве протопипа будет использоваться этот рисунок (найден здесь):

За дело!

Берегите голову!

И сразу - стоп! Первое, что важно помнить про иконки - их много! И у каждой - много размеров! А это значит, что придётся выполнить колоссальное колличество нудной, однообразной работы.

Поэтому самое первое, о чём надо подумать - это как максимально автоматизировать весь процесс и исключить из него рутину. Практика показывает, что лучше потратить неделю на обдумывание автоматизации процесса, чем три дня повторять однообразные действия. Потому что уже к концу первого дня вы будете тихо ненавидеть ваш пакет иконок и мечтать о его завершении.

Программное обеспечение

Понадобятся такие программы:

Программы подбирались таким образом, чтобы они были достаточно знакомы и обязательно максимально автоматизировали процесс. В результате был сделан выбор таким образом:

Автоматизация процесса

Путём долгих рассуждений были определены такие вопросы, которые рутинны, но могут быть автоматизированы:

  1. быстрое создание всех размеров иконки;
  2. быстрое создание новой иконки из существующей
  3. быстрая сборка иконки.

Быстрое создание всех размеров иконки

Photoshop имеет превосходный инструмент, который позволяет сохранять изображение как набор фрагментов. Это Файл \ Сохранить для Веб. Вот как это работает. Сперва с помощью инструмента "раскройка" на изображении выделяются области, которые будут соответствовать размерам иконок:

Далее, собственно выполняется команда Файл \ Сохранить для Веб. В появившемся окне для каждого ранее раскроенного фрагмента выставляется формат "PNG-24":

В окне сохранения выбираются "только изображения" и "только пользовательские фрагменты"; кстати говоря, имя файла вообще никак не участвует в сохранении, так что его можно писать любое:

В результате после сохранения в подпапке "images" сохранились все нужные изображения, готовые для импорта в иконку. Первый пункт выполнен!

Быстрое создание новой иконки из существующей

Планируются два отличия иконок: цвет и расширение.

Для быстрого изменения цвета в Photoshop будут использоваться корректирующие слои с маской ("цветовой тон/насыщенность" и "уровни").

А вот с расширениями не всё так просто: если с крупными размерами всё хорошо, то для мелких размеров расширения нужно рисовать попиксельно, чтобы они были чёткие. Или же использовать особые шрифты. Поиск по интернету нашёл два правильных шрифта: Munro и Wendy. Таким образом оба аспекта создания новой иконки из существующей автоматизированы.

Быстрая сборка иконки

Здесь всё просто: Microangelo Studio поддерживает импорт изображений без дополнительных вопросов, если эти изображения на него просто перетащить. Причём перетащить можно все изображения сразу. Единственный недостаток - сохранение в новый файл не имеет клавиатурного сокращения, а значит, его придётся каждый раз выполнять через главное меню.

Рисование размеров иконки

Сперва был нарисован самый большой размер. Получилось весьма похоже, хотя фон пришлось использовать несколько иной:

Далее копии всех слоёв иконки объединялись и уменьшались до нового целевого размера, например, до 96х96. Полученное изображение использовалось как подложка при рисовании уменьшённого изображения. При этом элементы подгонялись так, чтобы иметь чёткие границы. Даже если это не соответствовало изображению своего большого брата.

В конечном итоге были нарисованы все размеры. Для размера 16х16 не вышло добавить расширение, поэтому придётся обойтись без него:

Далее, чтобы быстро менять оттенок значка, добавляются корректирующие слои-фильтры с растровой маской:

На этом создание размеров иконки (исходника) завершено. В нём предусмотрены все размеры, автоматизированы расширение и оттенок, всё представлено наглядно.

Иконки плейлистов и аудио создаются аналогичным образом.

Сборка размеров в иконку

После того, как в папку Images сохранены все размеры одной иконки, выполняется следующая последовательность:

После всех манипуляций иконка "сохраняется как" (с именем целевого расширения, чтобы не путаться).

Обратите внимание: перечень размеров справа имеет ограничение по размеру предпросмотра в 48х48 пикселей. Поэтому тут хорошо видно, что было бы, если бы при создании малых размеров мы пошли по пути простого изменения размера.

Создание всех иконок

Наконец, наступает момент, когда на нас начинает работать вся наша автоматизация. Для создания следующей иконки требуется пять простых действий:

  1. Создаётся копия исходника, переименовывается в соответствии с расширением, которое в ней будет храниться, и открывается (в Photoshop).
  2. Вписывается расширение и настраивается оттенок "кадра" на иконке.
  3. Производится "сохранение для веб".
  4. В папке "images" выделяются все рисунки и перетаскиваются на окно Microangelo Studio.
  5. Иконка "сохраняется как".

Таким образом, на каждую иконку будет тратиться максимум минута. И то, лишь для того, чтобы подобрать иконке цвет. В результате всего через 15-20 минут все иконки сохранены и готовы к следующему шагу.

Создание библиотеки иконок

Создание библиотеки иконок выполняется так:

  1. Открывается Microangelo Librarian и в нём создаётся новый документ.
  2. Все ранее созданные иконки перетаскиваются на окно Microangelo Librarian; во всплывающем меню выбирается "add icons to workspace".
  3. Свежедобавленные иконки упорядочиваются.
  4. Библиотека иконок сохраняется с помощью File \ Save as....

В итоге, библиотека иконок приобрела следующий вид:

Обратите внимание: для удобства и функциональности сперва идут три иконки типов, потом - иконки расширений в том виде, в котором они идут в типах файлов Light Alloy. Такая организация не обязательна, но очень облегчит жизнь на следующем этапе. И помним про нулевую иконку!

Создание файла описания

Файл описания создаётся в соответствии с правилами, описанными в теории создания иконок для Light Alloy.

<?xml version="1.3"?> <ICONLIB> <AUTHOR name="Gilorn" email="" homepage="http://www.light-alloy.ru" comments="16x32x48x96x256 (RGB + alpha)"/> <ICONS> <ICON id="0" ext="3GP,ASF,AVS,EVO,BIK,TP,QT,RM,RMVB,RV,TS,WEBM,WTV,DVR-MS"/> <!-- video --> <ICON id="1" ext="AIF,AIFC,AIFF,APE,AT3,AU,CDA,DTS,KAR,M4A,MID,MIDI,MKA,MOD,MP1,MP2,MPA,MPC,OMA,RA,RAM,RMI, SND,AMR,AOB,IT,MO3,S3M,WV,XM,OPUS,TAK"/> <!-- audio --> <ICON id="2" ext="ASX,BDMV,IFO,LST,MPLS,PLS"/> <!-- playlist --> <ICON id="3" ext="LAP"/> <ICON id="4" ext="CUE"/> <ICON id="5" ext="M3U,M3U8"/> <ICON id="6" ext="AVI,DIVX"/> <ICON id="7" ext="MPE,MPEG,MPG,MPV,VOB,MTS,M2TS,M1V,M2V"/> <ICON id="8" ext="MKV"/> <ICON id="9" ext="F4V,FLV"/> <ICON id="10" ext="MP4,M4V"/> <ICON id="11" ext="HDMOV,MOV"/> <ICON id="12" ext="OGM,OGX,OGV"/> <ICON id="13" ext="WM,WMV"/> <ICON id="14" ext="AAC"/> <ICON id="15" ext="AC3"/> <ICON id="16" ext="FLAC"/> <ICON id="17" ext="MP3"/> <ICON id="18" ext="OGG"/> <ICON id="19" ext="WAV"/> <ICON id="20" ext="WMA"/> </ICONS> </ICONLIB>

Конструкция вида "<!-- video -->" является комментарием. Он позволяет делать пометки для собственных нужд, которые будут игнорироваться при обработке файла программами.

Результат

И вот, наконец свежий пакет иконок готов. Осталось только проверить, что имена файла описания и библиотеки иконок совпадают, и - готово!